<!-- <template>
	<view class="">
		<p class="p1">
			<img class="logoamg" src="@/static/logo.png" alt="">
		</p>
		<p class="p1">
			<span class="sp1">Hello,</span>
		</p>
		<p class="p2">
			<!-- 注册 -->
			<view class="dl" @click="show = true">
				Sign in
			</view>
			<!-- 登录 -->
			<view class="dl" @click="show1 = true" style="margin-top: 20px;background-color:whitesmoke ;">
				Sign up
			</view>
		</p>
		<p class="p3">
			<span @click="ForgottenPassword()">Forget  password?</span>
		</p>
		<view>
			
			<u-action-sheet 

				:closeOnClickOverlay="true" 
				:closeOnClickAction="true"  
				:title="title" 
				:show="show"
				@close="show = false"
				round="20px"
			>
				<view class="a_dl">
					<u-form :model="form" ref="uForm" :rules="rules">
						<u-form-item  prop="login" class="forma" >
							<u-input placeholder="请输入账号" 
								v-model="form.login"
								class="inputa"
								clearable				
							/>  
						</u-form-item>
						<u-form-item  prop="password" class="forma">
							<u-input placeholder="请输入密码"
								v-model="form.password"
								class="inputa"
								:password="true"
							/>
						</u-form-item>
						<u-button class="buttona" text="登录" @click="loginin()"></u-button>
					</u-form>
				</view>
			</u-action-sheet>
		</view>
		<!-- 注册 -->
		<view>
			<u-action-sheet 
				:actions="list" 
				:closeOnClickOverlay="true" 
				:closeOnClickAction="true"  
				:title="title1" 
				:show="show1"
				@close="show1 = false"
				round="20px"
			>
				<view class="a_dl">
					<u-form :model="formregister" ref="uForm1" :rules="registerules">
						<u-form-item  prop="username" class="forma" >
							<u-input placeholder="请输入用户名" 
								v-model="formregister.username"
								class="inputa"
								clearable				
							/>    
						</u-form-item>
						<u-form-item  prop="email" class="forma">
							<u-input placeholder="请输入邮箱"
								v-model="formregister.email"
								class="inputa"
								:password="true"
							/>
						</u-form-item>
						<u-form-item  prop="password" class="forma">
							<u-input placeholder="请输入密码"
								v-model="formregister.password"
								class="inputa"
								:password="true"
							/>
						</u-form-item>
						<u-button class="buttonb" text="注册" @click="register()"></u-button>
					</u-form>
				</view>
			</u-action-sheet>
		</view>

	</view>
</template>

<script>
export default {
		data() {
			return {
                list:[],
				form:{
					login:"",
					password:""
				},
				formregister:{
					username:"",
					email:"",
					password:""
				},
				// 登录校验
				rules:{
					login:[{
						required: true,
						message:'请输入账号',
						trigger:['change','blur'],
					}],
					password:[{
						required: true,
						message:'请输入密码',
						trigger:['change','blur'],
					}]
				},
				// 注册校验
				registerules:{
					username:[{
						required: true,
						message:'请输入用户名',
						trigger:['change','blur'],
					}],
					email:[{
						required: true,
						message:'请输入邮箱',
						trigger:['change','blur'],
					}],
					password:[{
						required: true,
						message:'请输入密码',
						trigger:['change','blur'],
					}],
				},
				title:'登录',
				title1:'注册',
				show: false,
				show1: false
			};
		},
		onLoad() {},
		methods: {
			//登录按钮
			loginin(){
                var that = this
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
                    uni.request({
                        url:'http://'+that.$host+':'+that.$port+'/clientuser/AppLogin',
                        method:'POST',
                        data:{
                            userName:that.form.login,
                            userPassword:that.form.password
                        },
                        success(res) {
                            if(res.data.flag){
                                uni.setStorageSync("loginId",res.data.obj.id)
                                uni.setStorageSync("userName",res.data.obj.userName)
                                uni.setStorageSync("userAvatar",res.data.obj.imageId)
                                uni.showToast({
                                    title:'登录成功'
                                })
                                
                                uni.$u.sleep(1500).then(() => {
                                    uni.switchTab({
                                        url:'/pages/index/index'
                                    })
                                })
                                
                            }else{
                                uni.$u.toast('密碼錯誤')
                              
                            }
                        }
                    })
               
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			//注册按钮
			register(){
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			//忘记密码
			ForgottenPassword(){
				
			}
		}
	};
</script>

<style>
	page{
		/* background-color: #E0E0E0; */
		/* background-color: red; */
		background-image: url("../../static/bg.jpg");
	}
	.logoamg{
		width: 75px;
		height: 75px;
		border-radius: 13px;
		margin-top: 70px;
	}
	.p1 img{
		margin-left: 50px;
	}
	.sp1{
		font-size: 28px;
		display: block;
		margin-left: 50px;
		margin-top: 45px;
	}
	.dl{
		width: 260px;
		height: 60px;
		/* background: red; */
		margin: 0 auto;
		font-size: 20px;
		line-height: 60px;
		text-align: center;
		border-radius: 30px;
		fill-opacity: (opacity=50);
		border: 1px solid whitesmoke;
	}
	.p2{
		margin-top: 160px;
	}
	.p3{
		text-align: center;
		font-size: 14px;
		text-decoration: underline;
		color: whitesmoke;
		margin-top: 25px;
	}

	.a_dl{
		height: 300px;
		width: 300px;
		/* background-color: rebeccapurple; */
		margin: 0 auto;
	}
	.a_dl .inputa{
		border-radius: 20px;
	}
	.a_dl .buttona{
		margin-top: 30px;
		background-color: #E8D9C2;
	}
	.a_dl .buttonb{
		margin-top:15px;
		background-color: #E8D9C2;
	}
	.forma{
		height: 65px;
		/* background-color: yellow; */
	}
	.u-form-item /deep/ .u-form-item__body__right__message{
		position: relative;
		left: -35px;
		text-align: left;
	}
</style>